<template>
	<view>
		<movable-area style="width: 750rpx; height: 100vh !important;">
			<view class="share" v-show="!previewShow">
				<!-- <view class="text-center mb-1 font-lg font-weight">添加活动</view> -->
				<view class="mt-1">
					<text class="text">活动名称：</text>
					<input type="text" v-model="huodong.actname" placeholder="请输入本次活动名称" class="input1" />
				</view>
				<view class="mr-2">
					<text class="text">活动内容：</text>
					<textarea v-model="huodong.actcontent" placeholder="请输入本次活动内容" class="input1" style="width: 650rpx; height: 150rpx;" />
				</view>
					
				<view class="mt-1">
					<text class="text">授权链接：</text>
					<input type="text" v-model="huodong.link" placeholder="请输入本次活动授权链接" class="input1" />
				</view>
				<view>
					<text class="text">活动报名价格：</text>
					<input type="number" v-model="huodong.price" placeholder="请输入本次活动报名价格" class="input1" />
				</view>
				
				<!-- <view class="mt-1">
					<view style="display: flex; justify-content: space-between; align-items: center;">
						<text>报名是否需要支付</text>
						<switch @change="switchChange" v-model="huodong.whetherpay" style="transform:scale(0.7)" color="#475dfc"></switch>
					</view>
					<view class="mt-1" v-show="sginprice">
						<text class="text">活动报名价格：</text>
						<input type="text" v-model="huodong.price" placeholder="请输入本次活动报名价格" class="input1" />
					</view>
				</view> -->
				
				<!-- <view class="mt-1">
					<text class="text">报名前按钮文字：</text>
					<input type="text" v-model="huodong.before_authorize_btn" placeholder="请输入报名前按钮文字" class="input1" />
					<text class="text">报名后按钮文字：</text>
					<input type="text" v-model="huodong.after_authorize_btn" placeholder="请输入报名后按钮文字" class="input1" />
				</view> -->
				<!-- <view class="mt-1">
					<text class="text">报名成功后提示文字：</text>
					<editor id="editorDesc" show-img-size :read-only="readOnly" show-img-resize show-img-toolbar class="ql-container" placeholder="请输入..." @statuschange="onStatusChange" @ready="onEditorReady" @input="getText">
					</editor>
				</view> -->
				<view class="mt-1">
					<text class="text">分享主标题：</text>
					<input type="text" v-model="huodong.sharemaintitle" placeholder="请输入本次活动分享的主标题" class="input1" />
				</view>
				<view class="mr-2">
					<text class="text">分享副标题：</text>
					<textarea v-model="huodong.sharetitle" placeholder="请输入本次活动分享的副标题" class="input1" style="width: 650rpx; height: 150rpx;" />
				</view>
				
				<view class="d-flex mb-2">
					<view>添加主题色：</view>
					<view :style="{background:this.huodong.background}" class="boxshadow" @click="show_color_picker()" v-model="huodong.background"></view>
					<t-color-picker ref="colorPicker" :color="color" @confirm="confirm"></t-color-picker>
				</view>
				<divider />
				
				<view class="d-flex flex-column">
					<text class="text">添加头部图片：</text>
					<view class="d-flex">
						<image @click="uploadImage('headimage')" :src="huodong.headimage ? huodong.headimage : '../../static/up-img.png'"
						 :class="huodong.headimage ? 'img' : 'img img1'"></image>
					</view>
				</view>
				<divider />
				
				<view class="d-flex flex-column">
					<text class="text">添加底部图片：</text>
					<view class="d-flex a-start">
						<image @click="uploadImage('footimage')" :src="huodong.footimage ? huodong.footimage : '../../static/up-img.png'" 
						 :class="huodong.footimage ? 'img' : 'img img1'"></image>
					</view>
				</view>
				<divider />
				
				<view class="d-flex flex-column">
					<text class="text">添加视频头部图片：</text>
					<view class="d-flex">
						<image @click="uploadImage('vidtopimg')" :src="huodong.vidtopimg ? huodong.vidtopimg : '../../static/up-img.png'"
						  :class="huodong.vidtopimg ? 'img' : 'img img1'"></image>
					</view>
				</view>
				<divider />
				
				<view class="d-flex flex-column">
					<text class="text">添加分享图片：</text>
					<view class="d-flex">
						<image @click="uploadImage('shareimage')" :src="huodong.shareimage ? huodong.shareimage : '../../static/up-img.png'"
						 :class="huodong.shareimage ? 'img' : 'img img1'"></image>
					</view>
				</view>
				<divider />
				
				<!-- 视频列表 -->
				<view>
					<view class="d-flex a-center mb-1 j-sb">
						<view>主视频：</view>
						<view @tap="$refs.openAlertaddmainVideo.Show()" class="addvideo">+ 添加视频</view>
					</view>
					<view v-if="huodong.mainvideo">
						<video :src="huodong.mainvideo" :poster="huodong.main_video_cover" class="video"></video>
					</view>
					<view v-else>
						<view class="mt-2 text-center mb-1">还未上传视频，请先上传!</view>
					</view>
					<divider />
					
					<view class="d-flex a-center mb-1 j-sb">
						<view>宣传视频：</view>
						<view @tap="$refs.openAlertaddVideo.Show()" class="addvideo">+ 添加视频</view>
					</view>
					<view v-if="huodong.mvideo.length">
						<uni-swipe-action>
							<view style="width: 650rpx;" v-for="(item,index) in huodong.mvideo" :key="index" >
								<uni-swipe-action-item :right-options="options" @click="bindClick($event,item,index)" @change="swipeChange($event, index)">
									<view class="video-list-title">
										<text class="title-text">{{item.title}}</text>
										<image class="title-icon" src="../../static/left.png"></image>
									</view>
								</uni-swipe-action-item>
								<view style="width: 650rpx; margin-bottom: 10rpx;">
									<video :src="item.video_url" :poster="item.video_cover" style="width: 100%; height: 300rpx;"></video>
									<divider />
								</view>
							</view>
						</uni-swipe-action>
					</view>
					
					<view v-else>
						<view class="mt-2 text-center">还未上传视频，请先上传!</view>
						<divider />
					</view>
				</view>
				
				<view style="margin-top: 10rpx;">
					<!-- <diyfrom @onclickdiyfrom="onclickdiyfrom" :extra_field_config="huodong.extra_field_config" ref="diyfrom"></diyfrom> -->
					<view style="font-size: 24rpx; color: #f00;">*默认已有姓名，电话字段</view>
					<view class="" style="display: flex; align-items: center;">
						<text>报名表单类型：</text>
						<view @tap="openSelectFrom" style="width: 65%; border: 1px solid #ccc; line-height: 60rpx; padding: 0 20rpx; border-radius: 10rpx; display: flex; justify-content: space-between; align-items: center;">
							<text class="from-text">{{from_data_show ? selectFromNamelist.name : '默认'}}</text>
							<text>></text>
						</view>
					</view>
					
					<view v-show="from_data_show">
						<view class="table-title">
							<text class="table-text1">文字提示</text>
							<text class="table-text2">字段名称</text>
							<text class="table-text2">字段类型</text>
							<text class="table-text2">是否必填</text>
						</view>
						<view v-for="(item,index) in selectFromNameData" :key="index">
							<view class="data-box">
								<text class="data-text1">{{item.toast}}</text>
								<text class="data-text1">{{item.name}}</text>
								<text class="data-text1">{{item.type.value}}</text>
								<view class="data-text2">
									<text>{{item.necessary ? '是' : '否'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="mt-1" style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; margin-top: 20rpx;">
					<text>是否显示历史信息：<span style="color: #f00; font-size: 24rpx;">如：经销商报名信息等</span></text>
					<switch @change="switchChangeHistory" style="transform:scale(0.7)" color="#475dfc"></switch>
				</view>
				
				<view><button class="share-but" @click="tijiao">提交</button></view>
				
				<openAlert BgColor="rgba(0,0,0,0.7)" ref="openAlertSelectFrom" :AlertClass="0" :AlertPosition="'center'">
					<view style="width: 650rpx; padding: 30rpx; background-color: #fff; border-radius: 10rpx; max-height: 900rpx; position: relative;">
						<text @tap="reset" style="position: absolute; font-size: 26rpx; background-color: #475dfc; color: #fff; top: 4rpx; right: 4rpx; line-height: 46rpx; border-radius: 10rpx; padding: 0 14rpx;">恢复默认</text>
						<view class="" style="text-align: center; font-size: 34rpx;margin-bottom: 20rpx;">请点击表单名称</view>
						<!-- <view style="color: #f00; font-size: 26rpx;line-height: 50rpx;">*若无需求表单请联系超级管理员添加</view> -->
						<view class=""  style="display: flex; flex-wrap: wrap;">
							<view v-for="(item, index) in extra_field_list" :key="index" style="margin-bottom: 10rpx;">
								<text @tap="selectFromName(index)" :class="selectFromNameIndex == index ? 'from-index' : 'from-false'">
									{{item.name}}
								</text>
							</view>
						</view>
						<view class="confrim-close-box">
							<text @tap="selectFromClose" class="confrim-close">取消</text>
							<text @tap="selectFromConfrim" class="confrim-confrim">确认</text>
						</view>
					</view>
				</openAlert>
				
				<openAlert BgColor="rgba(0,0,0,0.7)" ref="openAlertaddmainVideo" :AlertClass="0" :AlertPosition="'center'"  closeBtn>
					<view class="addvidlist">
						<view class="font-lg text-center">添加视频</view>
						<view class="d-flex flex-column">
							<text class="text mt-1">添加主视频封面：</text>
							<view class="d-flex">
								<image @click="uploadImage('main_video_cover')" :src="huodong.main_video_cover ? huodong.main_video_cover : '../../static/up-img.png'" :class="huodong.main_video_cover ? 'img' : 'img img1'"></image>
							</view>
						</view>
						<divider />
						
						<view>
							<view class="d-flex a-center mb-1 j-sb">
								<view>添加宣传主视频：</view>
								<view @tap="uploadVideo('mainvideo1')" class="addvideo">+ 添加视频</view>
							</view>
							<view v-if="!mainvideo1"></view>
							<view v-else>
								<video :src="mainvideo1" :poster="main_video_cover1" class="video"></video>
							</view>
						</view>
						
						<button @click="mainConfirm()" class="qrbut">确认上传</button>
					</view>
				</openAlert>
				
				<openAlert BgColor="rgba(0,0,0,0.7)" ref="openAlertaddVideo" :AlertClass="0" :AlertPosition="'center'"  closeBtn>
					<view class="addvidlist">
						<view class="font-lg text-center">添加视频</view>
						<view class="mt-1">视频标题：
							<input placeholder="请输入视频内容标题" type="text" v-model="addvideo.title" class="inaddtitle"/>
						</view>
						<view>
							<view>添加视频封面</view>
							<image @click="uploadImage('addvideo')" :src="addvideo.video_cover ? addvideo.video_cover : '../../static/up-img.png'" :class="addvideo.video_cover ? 'img' : 'img img1'" />
							<divider />
							
							<view class="d-flex j-sb">
								<view>上传视频：</view>
								<view @tap="uploadVideo('addvideo')" v-model="addvideo.video_url" class="avideo">+ 添加视频</view>
							</view>
							<view v-if="!addvideo.video_url"></view>
							<view v-else>
								<video :src="addvideo.video_url" class="video"></video>
							</view>
						</view>
						
						<button @click="queren()" class="qrbut">确认上传</button>
					</view>
				</openAlert>
			</view>
			
			<view v-show="previewShow">
				<preview :huodong="huodong"></preview>
			</view>
			
			<movable-view class="preview-box" @change="move" direction="all" @tap="Preview()" :x='x' :y="y">
				<view v-if="!previewShow" class="preview-true"><span>预览</span><span>主页</span></view>
				<view v-else class="preview-true"><span>结束</span><span>预览</span></view>
			</movable-view>
		
		</movable-area>
	</view>
	
</template>

<script>
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	import addOpenUploadVide from '../../components/admin/addopenuploadvideo.vue'
	import preview from '../../components/admin/preview.vue'
	import diyfrom from '../../components/admin/diyfrom.vue'
	// import leveditor from '../../components/LevineHua-editor/LevineHua-editor.vue'
	    export default {
	        components: {
	            tColorPicker,
				addOpenUploadVide,
				preview,
				diyfrom,
				// leveditor
	        },
		data() {
			return {
				x: 340,
				y: 600,
				previewShow: false,
				AlertClass: 0,
				AlertPosition: '',
				readOnly: false,
				formats: {},
				placeholder: '请输入...',
				huodong: {
					actname: '',
					actcontent: '',
					background: '',
					headimage: '',
					main_video_cover: '',
					vidtopimg: '',
					footimage: '',
					mainvideo: '',
					mvideo:[],
					extra_field_config: [],
					sharemaintitle: '',
					sharetitle: '',
					shareimage: '',
					price: '',
					link: '',
					historyInfo: 0,
					// before_authorize_btn: '',
					// after_authorize_btn: '',
					// whetherpay: '',
				},
				mainvideo1: '',
				main_video_cover1: '',
				addvideo: {
					title: '',
					video_cover: '',
					video_url: '',
				},
				sginprice: false,
				color:{r: 255,g: 0,b: 0,a: 1},
				backgroundStyle:'',
				radiolist:[{
					value: 'videolist',
					name: '宣传视频'
				},{
					value: 'mainvideo',
					name: '主视频'
				}],
				current: 0,
				diyfromdata: '',
				options: [{	id: 1,text: '上移',style: {	backgroundColor: '#fff', color: '#475dfc', fontSize: '36rpx'}},
					{id: 2,text: '下移',style: {	backgroundColor: '#fff', color: '#475dfc', fontSize: '36rpx'}},
					{id: 3,text: '删除',style: {	backgroundColor: '#dd524d', fontSize: '36rpx', margin: '10rpx 0'}},
				],
				historyInfo: false,
				from_data_show: false,
				selectFromNameData: [],
				extra_field_list: [],
				selectFromNameIndex: -1,
				selectFromNameId: 0,
			};
		},
		onLoad() {
			this.$comm.appLogin(user_info=>{
				this.extra_field_type_list()
			})
		},
		mounted() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();    
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
		},
		methods:{
			selectFromClose() {
				this.$refs.openAlertSelectFrom.Close()
				this.selectFromNameIndex = -1
			},
			
			reset() {
				this.selectFromNameId = 0
				this.selectFromNameIndex = -1
				this.selectFromNamelist = []
				this.from_data_show = false
				this.selectFromNameData = []
				this.$refs.openAlertSelectFrom.Close()
			},
			
			openSelectFrom() {
				// console.log(this.extra_field_list,this.extra_field_list.length,909090)
				for (let i = 0; i < this.extra_field_list.length; i++) {
					if (this.selectFromNameId == this.extra_field_list[i].id) {
						this.selectFromNameIndex = i
					}
				}
				this.$refs.openAlertSelectFrom.Show()
			},
			
			selectFromConfrim() {
				this.selectFromNamelist = this.extra_field_list[this.selectFromNameIndex]
				if (this.selectFromNamelist == undefined) {
					this.errEvent('请先选择需要的表单', 'none', 2000)
					return
				}
				this.selectFromNameData = JSON.parse(this.selectFromNamelist.extra_field_config)
				this.selectFromNameId = this.selectFromNamelist.id
				// console.log(this.selectFromNameData, this.selectFromNameId, '请先选择需要的表单')
				// this.selectFromNameData = this.selectFromNamelist
				this.from_data_show = true
				this.$refs.openAlertSelectFrom.Close()
			},
			selectFromName(index) {
				this.selectFromNameIndex = index
				// this.selectFromNamelist = this.extra_field_list[index]
				// console.log(this.extra_field_list[index])
			},
			extra_field_type_list() {
				this.$comm.request({
					url: 'api/activity_extra_type_list',
					method: 'GET',
					success: (res) => {
						console.log(res, 'api/activity_extra_type_list')
						this.extra_field_list = res.data.result
					}
				})
			},
			
			move(e) {
				this.x = e.detail.x;
				this.y = e.detail.y;
				// console.log(e,9999)
			},
			
			bindClick(e, item, index) { 
				if (e.content.id === 1) {
					if (index === 0) {
						this.errEvent('已经是第一个视频了！', 'none')
						return
					}
					this.huodong.mvideo.splice(index - 1, 0, item)
					this.huodong.mvideo.splice(index + 1, 1)
				} else if (e.content.id === 2) {
					if (this.huodong.mvideo.length - 1 === index) {
						this.errEvent('已经是最后一个视频了！', 'none')
						return
					}
					this.huodong.mvideo.splice(index + 2, 0, item);
					this.huodong.mvideo.splice(index, 1);
				} else if (e.content.id === 3) {
					this.huodong.mvideo.splice(index, 1)
				}
			},
			
			swipeChange(e, index) {
				// console.log('当前状态：' + open + '，下标：' + index,999);
			},
			
			getText(e) {
				if (this.selectTab === 1) {
					this.editorCtx1.getContents({
						success: (res) => {
							this.companyInfo.policy = res.html;
						}
					});
				}
				if (this.selectTab === 2) {
					this.editorCtx2.getContents({
						success: (res) => {
							this.companyInfo.introduction = res.html;
						}
					});
				}
			},
			
			onEditorReady() {
				setTimeout(() => {
					uni.createSelectorQuery().select('#editorDesc').context((res) => {
						this.editorCtx2 = res.context;
						this.editorCtx2.setContents({
							html: this.companyInfo.introduction,
							success: (res) => {
								console.log(res, '工厂介绍渲染成功');
							},
							fail: () => {
								console.log(res, '工厂介绍渲染失败');
							}
						})
					}).exec()
				}, 30)
			},
			
			onStatusChange(e) {
				const formats = e.detail;
				this.formats = formats;
			},
			
			switchChange: function (e) {
				this.sginprice = e.detail.value
				console.log(this.sginprice, this.huodong,'switchChange')
			},
			
			switchChangeHistory: function (e) {
				this.huodong.historyInfo = e.detail.value
				if (this.huodong.historyInfo == true) this.huodong.historyInfo = 1
				else this.huodong.historyInfo = 0
				// console.log(this.historyInfo, this.huodong)
			},
			
			onclickdiyfrom(e) {
				this.huodong.extra_field_config = e
				// console.log(e,this.huodong.extra_field_config,111)
			},
			
			delvideo(index){
				// console.log(index);
				this.huodong.mvideo.splice(index, 1)
			},
			
			Preview(){
				// console.log(this.huodong);
				if (this.previewShow == false) {
					let data = this.huodong;
					if (data.actname == '') {
						this.errEvent('活动名称不能为空', 'none')
						return false
					}
					if (data.actcontent == '') {
						this.errEvent('活动内容不能为空', 'none')
						return false
					}
					if (data.price == '') {
						this.errEvent('报名价格不能为空', 'none')
						return false
					}
					if (data.mainvideo == '') {
						this.errEvent('主视频不能为空', 'none')
						return false
					}
					this.previewShow = true
					return
				} else {
					this.previewShow = false
				}
			},
			
			//单项选择器
			radioChange: function(evt) {
				for (let i = 0; i < this.radiolist.length; i++) {
					if (this.radiolist[i].value === evt.target.value) {
						this.current = i;
						// console.log(this.current)
						break;
					}
				}
			},
			
			//背景色
			show_color_picker(){
				this.$refs.colorPicker.open()
			},
			confirm(e){
				this.color = e.rgba
				let rgba = e.rgba
				let rgba_style = "background-color:rgba("+rgba.r+","+rgba.g+","+rgba.b+","+rgba.a+")"
				this.backgroundStyle = rgba_style+";display: inline-block; width: 30rpx; height: 30rpx;";
				this.huodong.background = "rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.color.a+")"
			},
			
			//活动提交
			tijiao(){
				let data = this.huodong;
				data.whetherpay = this.sginprice
				if (data.actname == '') {
					this.errEvent('活动名称不能为空', 'none')
					return false
				}
				if (data.actcontent == '') {
					this.errEvent('活动内容不能为空', 'none')
					return false
				}
				if (data.sharemaintitle == '') {
					this.errEvent('活动分享主标题不能为空', 'none')
					return false
				}
				if (data.sharetitle == '') {
					this.errEvent('活动分享副标题不能为空', 'none')
					return false
				}
				if (data.price == '') {
					this.errEvent('活动报名价格不能为空', 'none')
					return false
				}
				/* if (this.sginprice == true) {
					if (data.price == '') {
						this.errEvent('活动报名价格不能为空', 'none')
						return false
					}
				} else {
					data.price = ''
				}
				if (data.before_authorize_btn == '') {
					this.errEvent('活动报名价格不能为空', 'none')
					return false
				}
				if (data.after_authorize_btn == '') {
					this.errEvent('报名后按钮文字不能为空', 'none')
					return false
				}
				if (data.html == '') {
					this.errEvent('报名成功后提示文字不能为空', 'none')
					return false
				} */
				if (data.shareimage == '') {
					this.errEvent('活动分享图片不能为空', 'none')
					return false
				}
				if (data.main_video_cover == '') {
					this.errEvent('主视频封面不能为空', 'none') 
					return
				}
				if (data.mainvideo == '') {
					this.errEvent('主视频不能为空', 'none')
					return false
				}
				/* if (this.selectFromNameId == 0) {
					this.errEvent('报名表单类型不能为空', 'none')
					return false
				} */
				console.log(this.selectFromNameId, JSON.stringify(this.selectFromNameData), data, 999)
				this.$comm.request({
					url:'api/activity_create',
					method:'POST',
					data:{
						title: data.actname,
						content: data.actcontent,
						top_img: data.headimage,
						main_video_cover: data.main_video_cover,
						video_top_img: data.vidtopimg,
						bottom_img: data.footimage,
						background: data.background,
						main_video: data.mainvideo,
						video_list_json: JSON.stringify(data.mvideo),
						extra_field_config: JSON.stringify(this.selectFromNameData),
						share_title: data.sharemaintitle,
						share_content: data.sharetitle,
						share_img: data.shareimage,
						pay_price: data.price,
						link: data.link,
						enter_history: data.historyInfo,
						type: this.selectFromNameId,
						// before_authorize_btn: data.before_authorize_btn,
						// after_authorize_btn: data.after_authorize_btn,
						// need_pay: data.whetherpay
					},
					success: res=>{
						var res = res.data;
						if (res.code == 201) {
							this.errEvent( res.msg, 'none')
							return
						}
						console.log(res,'tijiao')
						this.errEvent( res.msg, 'none')
						uni.navigateTo({
						    url: 'activity'
						});
					}
				});
			},
			
			// 确认上传宣传主视频
			mainConfirm(){
				if (this.mainvideo1 == '') {
					this.errEvent( '未上传视频', 'none')
					return
				}
				this.huodong.mainvideo = this.mainvideo1;
				this.$refs.openAlertaddmainVideo.Close(); 
			},
			
			// 确认上传宣传视频
			queren(){
				if (this.addvideo.title == '') {
					this.errEvent( '视频标题不能为空', 'none')
					return
				}
				if (this.addvideo.video_url == '') {
					this.errEvent( '未上传视频', 'none')
					return
				}
				this.huodong.mvideo.push(this.addvideo)
				this.$refs.openAlertaddVideo.Close(); 
				this.addvideo={
					title: '',
					video_cover: '',
					video_url: '',
				};
			},
			
			uploadVideo(parameter) {
				uni.chooseVideo({
					success: (res) => {
						console.log(res, 'uploadVideo')
						res['path'] = res['tempFilePath']
						this.$comm.ossUpFile(res, (url) => {
							if (parameter == 'addvideo') {
								this.$set(this.addvideo,'video_url',url);
							} else if (parameter == 'mainvideo1') {
								this.mainvideo1 = url
							}
						});
					}
				})
			},
			
			uploadImage(parameter) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.$comm.ossUpFile(res.tempFiles[0], (url) => {
							if (parameter == 'headimage') {
								this.huodong.headimage = url
							} else if (parameter == 'main_video_cover') {
								this.huodong.main_video_cover = url
							} else if (parameter == 'shareimage') {
								this.huodong.shareimage = url
							} else if (parameter == 'vidtopimg') {
								this.huodong.vidtopimg = url
							} else if (parameter == 'footimage') {
								this.huodong.footimage = url
							} else if (parameter == 'addvideo') {
								this.addvideo.video_cover = '';
								this.$set(this.addvideo,'video_cover',url);
							}
						});
					}
				})
			},
			
			errEvent(msg, icon){
				// console.log(msg,icon)
				uni.showToast({
					title: msg,
					icon: `${icon}` 
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	.from-text {
		overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #555;
	}
	
	.from-index {
		padding: 6rpx 16rpx; border: 1px solid #475dfc; line-height: 60rpx; border-radius: 10rpx; background-color: #475dfc; color: #fff; margin-left: 10rpx;
	}
	
	.from-false {
		padding: 6rpx 16rpx; border: 1px solid #ccc; line-height: 60rpx; border-radius: 10rpx; margin-left: 10rpx;
	}
	
	.confrim-close-box {
		display: flex; justify-content: space-around;align-items: center;
		
		.confrim-close {
			padding: 20rpx 60rpx; border: 1px solid #aaa; border-radius: 10rpx; margin-top: 20rpx;
		}
		.confrim-confrim {
			padding: 20rpx 60rpx; border: 1px solid #475cfc; border-radius: 10rpx; margin-top: 20rpx; color: #fff; background-color: #475cfc;
		}
	}
	
	.table-title {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-around;
		line-height: 70rpx;
		background-color: #eee;
	
		.table-text1 {
			width: 25%;
			text-align: center;
			border: 2rpx solid #000;
		}
	
		.table-text2 {
			width: 25%;
			text-align: center;
			border: 2rpx solid #000;
			border-left: none;
		}
	}
	.data-box {
		display: flex;
		justify-content: space-around;
		border-right: 2rpx solid #000;
		border-left: 2rpx solid #000;
			
		.data-text1 {
			word-break:break-all;
			width: 25%;
			text-align: center;
			border-right: 2rpx solid #000;
			border-bottom: 2rpx solid #000;
			padding: 20rpx 0;
		}
			
		.data-text2 {
			width: 25%;
			text-align: center;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #000;
			position: relative; 
			align-items: center; 
			display: flex; 
			flex-direction: column;
		}
	}
	
	page{
		font-size: 30rpx;
	}
	.video-list-title {
		width: 650rpx;display: flex; justify-content: space-between; align-items: center;
		.title-text {
			font-size: 32rpx; max-width: 640rpx; margin: 10rpx 0;
		}
		.title-icon {
			width: 50rpx; height: 50rpx;
		}
	}
	.input1{
		background-color: #f1f1f1; 
		border-radius: 10rpx; 
		padding: 10rpx; 
		margin-top: 10rpx; 
		margin-bottom: 20rpx; 
		height: 60rpx;
	}
	.radiogroup{
		margin: 10rpx 0 0 0;
		
		text {
			margin: 0 20rpx 0 0;
		}
	}
	.divide{
		background-color: #999999; 
		height: 3rpx; 
		width: 100%; 
		margin-bottom: 20rpx;
	}
	.boxshadow{
		width: 40rpx; 
		height: 40rpx; 
		border: solid 4rpx #999; 
		box-shadow: 7rpx 7rpx #d9d9d9; 
		border-radius: 5rpx;
	}
	.img{
		height: 150rpx; 
		width: 150rpx; 
		margin-top: 10rpx; 
		margin-bottom: 20rpx; 
		margin-right: 20rpx; 
		border-radius:5rpx
	}
	.img1{
		padding: 48rpx; 
		border: solid 5rpx #EDEDED; 
		border-radius: 5rpx;
	}
	.addvideo{
		color: #fff; 
		background-color: #475dfc; 
		border-radius: 50rpx; 
		padding: 0 10rpx 0 10rpx;
	}
	.inaddtitle{
		margin:10rpx 0 20rpx 0; 
		background-color: #F1F1F1; 
		border-radius: 10rpx; 
		height: 60rpx; 
		padding: 0 10rpx 0 20rpx;
	}
	.addvidlist{
		background-color: #ffffff; 
		width: 650rpx; 
		border-radius: 30rpx; 
		padding: 30rpx 50rpx 50rpx 50rpx;
	}
	.avideo{
		color: #fff; 
		background-color: #475dfc; 
		border-radius: 50rpx; 
		padding: 0 10rpx 0 10rpx;
	}
	.qrbut{
		text-align: center;
		background-color: #475dfc; 
		color: #fff; 
		margin-top: 50rpx;
	}
	.uni-hello-addfile {
		text-align: center;
		line-height: 200rpx;
		background: #F1F1F1;
		padding: 50rpx;
		height: 300rpx;
		margin-top: 10px;
		font-size: 35rpx;
		color: #808080;
		margin-bottom: 20rpx;
	}
	.video {
		margin-bottom: 10rpx;
		width: 100%;
		height: 300rpx;
		margin-top: 10rpx;
	}
	@mixin but {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: #475dfc;
		color: #ffffff;
	}
	.share-but {
		@include but;
		margin-top: 40rpx;
	}
	.share {
		// width: 550rpx;
		background-color: #FFF;
		padding: 30rpx 50rpx 50rpx 50rpx;
		// border-radius: 12rpx;
	}
	
	.preview-box {
		background-color: rgba(71,92,252,0.8); 
		position: fixed !important; 
		// top: 85%;
		// left: 80%;
		height: 70rpx;
		width: 70rpx; 
		border-radius: 50%;
		padding: 20rpx;
		color: #fff; 
		right: 0rpx;
		z-index: 66;
		
		.preview-true {
			line-height: 35rpx;
			display: flex; 
			flex-direction: column; 
			align-items: center;
		}
	}
</style>
